import { memo, useCallback, useEffect, useReducer } from 'react';
import homeBg from '@/assets/home-bg.png';
import { Carousel } from 'antd';
import ClassroomItem from '@/components/ClassroomItem/ClassroomItem';
import { RightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { CourseList, getCourseListApi } from '@/api/api';

interface HomeList {
  festival: CourseList[];
  solarTerm: CourseList[];
  zodiac: CourseList[];
  chineseZodiac: CourseList[];
}

interface Action {
  type: string;
  payload: any;
}

// 首页列表数据修改方法
const reducer = (state: HomeList, action: Action): HomeList => {
  switch (action.type) {
    case 'savaData':
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// 首页内容组件
const HomeContent = () => {
  const navigate = useNavigate();
  const [homeList, dispatch] = useReducer(reducer, {
    festival: [],
    solarTerm: [],
    zodiac: [],
    chineseZodiac: [],
  });

  // 首页展示模块
  const showModule = [
    {
      title: '节日',
      list: homeList.festival,
      path: '/Classify/festival',
    },
    {
      title: '节气',
      list: homeList.solarTerm,
      path: '/Classify/solarTerm',
    },
    {
      title: '生肖',
      list: homeList.zodiac,
      path: '/Classify/zodiac',
    },
    {
      title: '星座',
      list: homeList.chineseZodiac,
      path: '/Classify/chineseZodiac',
    },
  ];

  // 获取首页课程信息
  const getHomeCourseList = useCallback(async () => {
    const res = await getCourseListApi();
    if (res.code === 200) {
      dispatch({ type: 'savaData', payload: res.data });
    }
  }, []);

  // 请求课程列表数据
  useEffect(() => {
    getHomeCourseList();
  }, [getHomeCourseList]);

  return (
    <div className="w-full h-full px-[5%] lg:px-[15%] md:px-[10%] sm:px-[5%] pt-[32px]">
      {/* 轮播图组件 */}
      <div className="max-w-[100%] aspect-video mx-auto">
        <Carousel
          className="w-full h-full overflow-hidden"
          arrows
          adaptiveHeight
          fade
        >
          <img
            className="w-full h-full object-cover"
            src={homeBg}
            alt=""
          />
        </Carousel>
      </div>
      {/* 循环课程列表 */}

      <div className="pt-[32px]">
        {showModule.map((item, index) => (
          <div key={index}>
            <div className="text-[20px]  flex-between mb-[16px]">
              <div className="text-[#333] font-bold">{item.title}</div>
              <div
                className="text-[#969393] text-[16px] cursor-pointer"
                onClick={() => {
                  navigate(item.path);
                }}
              >
                查看更多
                <RightOutlined />
              </div>
            </div>
            <div className="grid grid-cols-[repeat(auto-fill,minmax(326px,1fr))] gap-4">
              {/* 节日列表 */}
              {item.list.map((item) => (
                <ClassroomItem
                  key={item.id}
                  classroomData={item}
                />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default memo(HomeContent);
